<script setup lang="ts">
import * as fileSaver from 'file-saver';
import { randomRGB, weiboShare } from '@/utils';
import { MMessage } from '@/libs';
import { useElementBounding, useFullscreen } from '@vueuse/core';
import { computed, useTemplateRef } from 'vue';
import type { ListItemEmits } from './types';

const props = defineProps<{
  item: Record<string, any>;
  width: number;
}>();

const imgRef = useTemplateRef<HTMLImageElement>('imgRef');
const imgFullscreenHandler = useFullscreen(imgRef);

const emits = defineEmits<ListItemEmits>();

const {
  width: imgWidth,
  height: imgHeight,
  x: imgX,
  y: imgY
} = useElementBounding(imgRef);
const calcImgCenter = computed(() => {
  return {
    translateX: parseInt(String(imgX.value + imgWidth.value / 2)),
    translateY: parseInt(String(imgY.value + imgHeight.value / 2))
  };
});
const onToPinsClick = () => {
  emits('onToPinsClick', { id: props.item.id, location: calcImgCenter.value });
};

const onDownload = (item: Record<string, any>) => {
  MMessage({ type: 'success', content: '下载成功' });
  setTimeout(() => {
    fileSaver.saveAs(item.photoDownLink);
  }, 100);
};

const onShareClick = () => {
  weiboShare(props.item.photo, window.origin + '/pins/' + props.item.id);
};
</script>

<template>
  <div class="rounded bg-white pb-1 dark:bg-zinc-900 xl:dark:bg-zinc-800">
    <div
      class="group relative w-full cursor-zoom-in rounded"
      :style="{ backgroundColor: randomRGB() }"
      @click="onToPinsClick"
    >
      <img
        v-lazy="props.item.photo"
        class="w-full rounded bg-transparent"
        :style="{
          height: `${(props.width / item.photoWidth) * item.photoHeight}px`
        }"
        alt=""
        ref="imgRef"
      />
      <div
        class="absolute top-0 left-0 hidden h-full w-full rounded bg-zinc-900/50 opacity-0 duration-300 group-hover:opacity-100 xl:block"
      >
        <MButton class="absolute top-1.5 left-1.5" @click="onShareClick">
          分享
        </MButton>
        <MButton
          class="absolute top-1.5 right-1.5"
          type="info"
          icon="heart"
          iconClass="fill-zinc-900 dark:fill-zinc-200"
        >
          点赞
        </MButton>
        <MButton
          class="absolute bottom-1.5 left-1.5 bg-zinc-100/70"
          type="info"
          icon="download"
          size="small"
          iconClass="fill-zinc-900 dark:fill-zinc-200"
          @click.stop="onDownload(props.item)"
        >
          下载
        </MButton>
        <MButton
          class="absolute right-1.5 bottom-1.5"
          type="info"
          size="small"
          icon="full"
          iconClass="fill-zinc-900 dark:fill-zinc-200"
          @click="imgFullscreenHandler.enter"
        >
          全屏
        </MButton>
      </div>
    </div>
    <p class="mt-1 px-1 text-sm font-bold text-zinc-900 dark:text-zinc-300">
      {{ props.item.title }}
    </p>
    <div class="mt-1 flex items-center px-1">
      <img :src="props.item.avatar" alt="" class="h-2 w-2 rounded-full" />
      <span class="ml-1 text-sm text-zinc-500">{{ props.item.author }}</span>
    </div>
  </div>
</template>
